<template>
    <!-- 三级列表 -->
    <Category :disabled="showList === 1 || showList === 2"/>

    <el-card shadow="always" :body-style="{ padding: '20px' }" :style="{ marginTop: '40px' }">
        <!-- 条件渲染 -->
        <SpuList v-if="showList === 0" @setState="setState" />
        <SpuFrom v-if="showList === 1" @setState="setState" :spuInfo="newSpuInfo"/>
        <SkuFrom v-if="showList === 2" @setState="setState" :spuInfo="newSpuInfo"/>
    </el-card>


</template>

<script lang="ts">
import { defineComponent } from "vue";
import SpuList from "./components/SpuList/index.vue"
import SpuFrom from "./components/SpuFrom/index.vue"
import SkuFrom from "./components/SkuFrom/index.vue"
import type { SpuInfoType } from "@/api/spu";
export default defineComponent({
    name: "Spu",
});
</script>

<script setup lang="ts">
import { ref } from "vue"
import useAttrStore from "@/stores/category";
import { storeToRefs } from "pinia";


//1.定义数据条件渲染不同组件
const showList = ref(0)

//2.拿到pinia数据
const attrStore = useAttrStore()
const { category3Id } = storeToRefs(attrStore)

//定义数据接收row，传递给需要的子组件
const newSpuInfo = ref<SpuInfoType>({
    category3Id: category3Id.value as number,
    description: "",
    spuName: "",
    tmId: null,
    spuImageList: [],
    spuSaleAttrList: []
})

//3.自定义事件接收子组件传值，切换到别的组件
const setState = (state: number, row?: SpuInfoType): void => {
    //切换组件
    showList.value = state

    //判断有没有row
    if (row) {
        //有row是修改需要数据回填
        newSpuInfo.value = row
    } else {
        //没有row是新增,要清空数据
        newSpuInfo.value = {
            category3Id: category3Id.value as number,
            description: "",
            spuName: "",
            tmId: null,
            spuImageList: [],
            spuSaleAttrList: []
        }
    }
}


</script>